<template>
	<view class="video-list">
		<view class="video-item mt20 pb20" v-for="(article, index) in list" :key="article.id" @tap="goDetail(article)">
			<view class="video-box">
				<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true" width="710rpx" height="400rpx" buttonWidth="120rpx" v-if="article.sportId == 1"></FullVideo>
				<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')" :article="true" width="710rpx" height="400rpx" buttonWidth="120rpx" v-else></FullVideo>
			</view>
			<view class="item-title text-hidden two">
				<text class="text-primary">{{article.title}}</text>
			</view>
			<view class="item-foot flex-r ac jsb">
				<view class="expert-info flex-r ac" @tap.stop="$CHS.goExpertHome(article.expertId)">
					<lazy-image class="image border-round" :src="article.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					<text class="text-small">{{article.expertName}}</text>
				</view>
				<view class="view-info flex-r ac">
					<image class="comment-icon" src="@/public/images/bar/comment.png" mode="aspectFit"></image>
					<text class="text-small">{{article.commentNum || 0}}</text>
					<image class="view-icon" src="@/public/images/bar/views.png" mode="aspectFit"></image>
					<text class="text-small">{{article.virtualReadNum || 0}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "VideoArticle",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			//进入详情
			goDetail(article) {
				uni.$once('readNum', (data)=>{
					article.virtualReadNum = data.num
				})
				this.$CHS.goArticleDetail(article.id, {type: article.userType || 'expert'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-list{
		.video-item{
			.item-title{
				margin-top: 15rpx;
				max-width: 710rpx;
				font-weight: 500;
				line-height: 42rpx;
			}
			.item-foot{
				margin-top: 15rpx;
				.expert-info{
					.image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}
				}
				.view-info{
					flex: 2;
					justify-content: flex-end;
					.comment-icon, .view-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.view-icon{
						margin-left: 40rpx;
					}
				}
			}
		}
	}
</style>